<template>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <!-- 条件查询区域 -->
        <a-form layout="inline">
          <a-row :gutter="[24]">
            <a-col :span="6">
              <a-form-item label="区域名称：">
                <a-input placeholder="请输入区域名称" allowClear v-model="queryParam.name"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-button type="primary"  icon="search" @click="getList()">查询</a-button>
              <a-button type="primary"  icon="reload" style="margin-left: 8px" @click="reSetParam()">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
        <a-row>
          <a-button type="primary"  icon="plus" @click="addRoot()">新增一级区域</a-button>
          <a-button type="primary"  icon="sync" style="margin-left: 8px">刷新</a-button>
        </a-row>
        <a-row>
          <a-col :span="24">
            <!--url：指定表格加载时请求的后端接口地址-->
            <!--columns：指定表格列配置项数据-->
            <j-tree-table :url="rootUrl"
                          :columns="columns"
                          :childrenUrl="childrenUrl"
                          :queryKey="parentId"
                          :tableProps="tableProps"

                          >

              <template slot="actions" slot-scope="text,record,index">
                <a href="javascript:;" style="margin-right: 10px">添加子区域</a>
                <a href="javascript:;" style="margin-right: 10px" @click="openUpdateModal(text.record)">编辑</a>
                <a href="javascript:;" style="margin-right: 10px" @click="deleteModal(text.record)">删除</a>
                <a href="javascript:;" >查看平面图</a>
              </template>
            </j-tree-table>
          </a-col>
        </a-row>

        <a-modal v-model="updateVisible" title="编辑" @ok="handleAddOk" width="60%">
          <a-form-model :model="updateForm" ref="updateForm" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="上级区域：" prop="parentId">
              {{parentName}}
            </a-form-model-item>
            <a-form-model-item label="排序：" prop="sort">
              <a-input v-model="updateForm.sort"/>
            </a-form-model-item>
            <a-form-model-item label="区域名称：">
              <a-input v-model="updateForm.name"/>
            </a-form-model-item>
            <a-form-model-item label="地图编码：">
              <a-input v-model="updateForm.mapCode"/>
            </a-form-model-item>
            <a-form-model-item label="坐标(所在位置)：">
              <a-input v-model="updateForm.atLocation"/>
            </a-form-model-item>
            <a-form-model-item label="联系电话：">
              <a-input v-model="updateForm.phone"/>
            </a-form-model-item>
            <a-form-model-item label="备注：">
              <a-input v-model="updateForm.description"/>
            </a-form-model-item>
            <a-form-model-item label="状态：" prop="status">
              <a-radio-group v-model="updateForm.status">
                <a-radio-button :value="1">正常</a-radio-button>
                <a-radio-button :value="2">禁用</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-form-model>
        </a-modal>


      </div>
    </a-card>
</template>

<script>
    //定义引入的js插件
    import ARow from "ant-design-vue/es/grid/Row";
    import {getAction} from '@/api/manage';
    import JTreeTable from '@/components/jeecg/JTreeTable';
    export default {
      components: {ARow,JTreeTable},
      data() {
            return {
                //定义组件中关联属性
              selectedRowKeys: [],
              /* 表格绑定数据*/
              //参数
              queryParam:{
                name:undefined
              },
              updateVisible:false,
              /* 表单控件布局属性*/
              labelCol: {span: 6},
              wrapperCol: {span: 16},
              //上级区域
              parentName:undefined,
              //请求路径
              rootUrl:'/area/listRoot',//根节点请求路径
              childrenUrl:'/area/listChildren',//子节点加载路径
              list:'/area/list',
              parentId:undefined,
              //列名
              columns:[
                {title: '区域名称',align:'center', dataIndex: 'name'},
                {title: '地图编码',align:'center',dataIndex: 'mapCode'},
                {title: '排序', align:'center', dataIndex: 'sort'},
                {title: '联系电话', align:'center', dataIndex: 'phone'},
                {title: '备注', align:'center', dataIndex: 'description'},
                {title: '平面图',align:'center', dataIndex: 'imgUrl'},
                {title: '状态',align:'center', dataIndex: 'status'},
                {title: '操作',dataIndex:'actions',align:'center', scopedSlots: { customRender: 'actions' } }
              ],
              updateForm:{}
            }
        },
        methods: {
            //定义组件事件关联方法
          openUpdateModal(record) {
            //将事件传入的表格行对象，浅拷贝赋值给弹窗回显对象
            this.updateForm = Object.assign({}, record)
            this.updateVisible = true;
          },
          handleAddOk(){

          },
          getList(){
            getAction(this.list,this.queryParam).then((res) => {
              console.log(res);
              this.parentId=res.result[0].parentId;
              console.log(this.parentId);
            })
          },
          //重置
          reSetParam(){
            this.queryParam.name=undefined;

          },
          //新增一级区域
          addRoot(){
            this.updateVisible = true;
          }

        },
        computed: {
          tableProps() {
            let _this = this
            return {
              // 列表项是否可选择
              // 配置项见：https://vue.ant.design/components/table-cn/#rowSelection
              rowSelection: {
                selectedRowKeys: _this.selectedRowKeys,
                onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
              }
            }
          }
        }
    }
</script>